<template>
	<a-card :bordered="false" class="box-card">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="标题" name="searchKey">
						<a-input v-model:value="searchFormState.searchKey" placeholder="请输入标题" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="search">查询</a-button>
					<a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<a-divider style="margin: 0px" />
		<a-table :dataSource="data.dataSource" :columns="columns" :pagination="false" class="box-table"
			:customRow="goDetail">
			<template v-slot:bodyCell="{ column, record }">
				<!-- <template v-if="column.dataIndex === 'operation'">
					<a @click="goDetail(record)" style="color: #326eff">查看</a>
				</template> -->
				<template v-if="column.dataIndex === 'ztstatus'">
					<span class="crie">已处理</span>
				</template>
				<template v-if="column.dataIndex === 'zt'">
					<span>{{ fil(record.zt) }}</span>
				</template>
			</template>
		</a-table>
		<div class="box-pagin">
			<a-pagination show-size-changer show-quick-jumper :show-total="(total) => `共 ${total} 条`"
				v-model:current="searchFormState.current" v-model:pageSize="searchFormState.size" :total="total"
				@showSizeChange="onShowSizeChange" @change="pageNumberChange" />
		</div>
	</a-card>
</template>

<script setup name="Todo">
import approvalApi from '@/api/biz/approvalApi'
import { useRouter } from 'vue-router'
import sysConfig from '@/config/index'
const router = useRouter()
let searchFormState = reactive({
	searchKey: '',
	current: 1,
	size: 10,
	status: '1'
})

const searchFormRef = ref()
const total = ref(0)
const onShowSizeChange = (current, pageSize) => {
	searchFormState.current = current
	searchFormState.size = pageSize
	loadData()
}
const pageNumberChange = (page, pageSize) => {
	searchFormState.current = page
	searchFormState.size = pageSize
	loadData()
}
const search = () => {
	searchFormState.current = 1
	loadData()
}
const data = reactive({
	dataSource: []
})
const columns = [
	{
		title: '标题',
		dataIndex: 'wfMessagesAtt1',
		key: 'wfMessagesAtt1'
	},
	{
		title: '审批类型',
		dataIndex: 'zt',
		key: 'zt'
	},
	{
		title: '状态',
		dataIndex: 'ztstatus',
		key: 'ztstatus'
	},
	{
		title: '创建人',
		dataIndex: 'originatorName',
		key: 'originatorName'
	},
	{
		title: '当前环节',
		dataIndex: 'activityname',
		key: 'activityname'
	},
	{
		title: '当前处理人',
		dataIndex: 'performerName',
		key: 'performerName'
	},
	{
		title: '上一环节处理人',
		dataIndex: 'senderPerson',
		key: 'senderPerson'
	},
	{
		title: '接收时间',
		dataIndex: 'createDate',
		key: 'createDate'
	}
	// {
	// 	title: '操作',
	// 	dataIndex: 'operation'
	// }
]
// 进详情
const goDetail = (record) => {
	// record中获取id传给详情页面\
	// 存储工单发起人
	return {
		style: {
			cursor: 'pointer'
		},
		onClick: () => {

			const config = sysConfig.DEVICE_CONFIG
			let tableName = ''
			if (record.appType) {
				let arr = []
				config.forEach((v) => {
					if (record.appType.includes(v.key)) {
						arr.push(v.oid)
					}
				})
				tableName = arr.join()
			}
			router.push({
				path: '/biz/approval/detail',
				query: {
					id: record.messageTrackId,
					approvalType: record.zt,
					originatorName: record.originatorName,
					doneStatus: '1',
					processInstanceId: record.processInstanceId,
					tableName: tableName,
					title: record.wfMessagesAtt1
				}
			})
		}
	}
}
onMounted(() => {
	loadData()
})
//列表
const loadData = () => {
	return approvalApi.getPendinglist(searchFormState).then((res) => {
		data.dataSource = res.records
		total.value = res.total
	})
}
const fil = (v) => {
	let str = ''
	switch (v) {
		case '0':
			str = '下架'
			break
		case '1':
			str = '新增'
			break
		case '2':
			str = '编辑'
			break
		case '3':
			str = '升级'
			break
		case '4':
			str = '上架'
			break
		case '5':
			str = '新增'
			break
		case '6':
			str = '[测试]新增'
			break
		case '7':
			str = '[测试]变更'
			break
		case '8':
			str = '应用接入'
			break
		default:
			break
	}
	return str
}
</script>
<style scoped lang="less">
.box-card {
	.box-table {
		margin-top: 10px;
		// min-height: 400px;

		height: calc(100vh - 285px);
		overflow-y: scroll;
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
	}

	.box-pagin {
		margin-top: 24px;
		text-align: right;
	}
}

.crie::before {
	display: inline-block;
	width: 6px;
	height: 6px;
	content: '';
	border-radius: 50%;
	background-color: rgb(0, 180, 42);
	vertical-align: middle;
	margin-right: 4px;
}

.box-table::-webkit-scrollbar {
	display: none;
	/* Chrome Safari */
}

// 美化滚动条
// .box-table::-webkit-scrollbar {
//     width: 10px;
//     height: 10px;
// }

// .box-table::-webkit-scrollbar-track {
//     width: 6px;
//     background: rgba(#101F1C, 0.1);
//     -webkit-border-radius: 2em;
//     -moz-border-radius: 2em;
//     border-radius: 2em;
// }

// .box-table::-webkit-scrollbar-thumb {
//     background-color: rgba(144, 147, 153, .5);
//     background-clip: padding-box;
//     min-height: 28px;
//     -webkit-border-radius: 2em;
//     -moz-border-radius: 2em;
//     border-radius: 2em;
//     transition: background-color .3s;
//     cursor: pointer;
// }

// .box-table::-webkit-scrollbar-thumb:hover {
//     background-color: rgba(144, 147, 153, .3);
// }</style>
